<template>
  <div class="lucky-draw">
    <div class="wheel" :style="{ transform: `rotate(${rotation}deg)` }">
      <div 
        v-for="(prize, index) in prizes" 
        :key="index"
        class="prize-item"
        :style="getItemStyle(index)"
      >
        {{ prize.name }}
      </div>
    </div>
    <button 
      class="draw-btn" 
      @click="startDraw"
      :disabled="isRotating"
    >
      开始抽奖
    </button>
  </div>
</template>

<script>
export default {
  name: 'LuckyDraw',
  data() {
    return {
      prizes: [
        { name: '一等奖', probability: 0.1 },
        { name: '二等奖', probability: 0.2 },
        { name: '三等奖', probability: 0.3 },
        { name: '谢谢参与', probability: 0.4 },
      ],
      rotation: 0,
      isRotating: false
    }
  },
  methods: {
    getItemStyle(index) {
      const rotate = (360 / this.prizes.length) * index
      return {
        transform: `rotate(${rotate}deg) translateY(-50%)`,
      }
    },
    startDraw() {
      if (this.isRotating) return
      
      this.isRotating = true
      
      // 随机选择奖品
      const random = Math.random()
      let accumulator = 0
      let prizeIndex = 0
      
      for (let i = 0; i < this.prizes.length; i++) {
        accumulator += this.prizes[i].probability
        if (random < accumulator) {
          prizeIndex = i
          break
        }
      }

      // 计算旋转角度
      const baseRotation = 360 * 5 // 基础旋转5圈
      const targetRotation = 360 - (360 / this.prizes.length) * prizeIndex
      const finalRotation = baseRotation + targetRotation

      // 执行动画
      this.rotation = finalRotation
      
      setTimeout(() => {
        this.isRotating = false
        alert(`恭喜获得：${this.prizes[prizeIndex].name}！`)
      }, 4000)
    }
  }
}
</script>

<style scoped>
.lucky-draw {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #333;
  position: relative;
  transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.prize-item {
  position: absolute;
  width: 50%;
  height: 20px;
  left: 50%;
  top: 50%;
  text-align: right;
  transform-origin: 0% 50%;
  padding-right: 20px;
}

.draw-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.draw-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>